<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="datare">
            <div class="ra">创建子账号</div>
            <div class="toxian">基本资料</div>
            <el-form
              status-icon
              ref="ruleForm2"
              :model="ruleForm2"
              :rules="rules2"
              :label-position="labelPosition"
              label-width="100px"
              style="margin-top: 20px;margin-left: 20px;"
            >
              <el-form-item label="角色类型：">
                <el-col :span="8">
                  <el-select v-model="ruleForm2.value" placeholder="请选择" style="width: 100%;">
                    <el-option v-for="(item,index) in ruleForm2.options" :key="index" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="账户名：" prop="businessName">
                <el-col :span="8">
                  <el-input v-model="ruleForm2.businessName"></el-input>
                </el-col>
                <el-col :span="14" :offset="1">
                  <p>*账户名填写须知：不可与其他商家昵称重复</p>
                </el-col>
              </el-form-item>
              <el-form-item label="关联手机号：" prop="phones">
                <el-col :span="8">
                  <el-input v-model="ruleForm2.phones"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="验证码：" prop="codes">
                <el-col :span="5">
                  <el-input v-model="ruleForm2.codes"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-button v-if="lfs" @click="lfsyzm()">发送验证码</el-button>
                  <el-button v-else>{{times}}</el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="账户密码：" prop="password">
                <el-col :span="8">
                  <el-input type="password" v-model="ruleForm2.password"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <div class="lbu102bt">
              <el-button @click="keeps" type="danger">保存</el-button>
            </div>
            <el-table
              :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}"
              :row-style="{height:'20px'}"
              :cell-style="{padding:'2px 0px'}"
              :data="tableData"
              style="width: 873px;margin:15px auto"
            >
              <el-table-column prop="businessName" label="账户名"></el-table-column>
              <el-table-column prop="roleName" label="角色"></el-table-column>
              <el-table-column label="操作">
                <!-- 用slot-scope="scope" -->
                <template slot-scope="scope">
                  <el-switch
                    style="display: block"
                    v-model="scope.row.active"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="启用"
                    inactive-text="禁用"
                    @change="handleInput(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
            </el-table>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessF from "@/components/businessF";
import businessL from "@/components/businessL";
import { child_accout_create, role_list, wcode,child_accout_list,child_accout_del } from "@/apiUrl/busslogin";
export default {
  components: {
    merchantHeader,
    Footer,
    businessF,
    businessL
  },
  data() {
    // <!--验证手机号是否合法-->
    let checkTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else if (!this.checkMobile(value)) {
        callback(new Error('手机号码不合法'))
      } else {
        callback()
        this.PtTelVerify()
      }
    }
    return {
      lfs: true,
      times: 60,
      region: "",
      labelPosition: "right",
      ruleForm2:{
        options: null, //账号类型
      value: "", //账号类型
      businessName: "",
      phones: "",
      codes: "",
      password: "",
      },
      tableData:null,
      rules2: {
        phones: [{ validator: checkTel, trigger: 'change' }],
      },
    };
  },
  created() {
    var datas = {
      businessId: this.$store.getters.businessId
    };
    role_list(datas).then(res => {
      // console.log(res);
      this.ruleForm2.options = res.data.data;
    });
    this.tabselect()
  },
  methods: {
    handleInput(bol) {
       this.$confirm('禁用后，该账户将不能正常使用', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var actives
          if(bol.active){
            actives=0
          }else{
            actives=1
          }
          var datas={
            businessId:bol.businessId,
            active:actives
          }
          child_accout_del(datas).then(res=>{
            this.$message({
               message: res.data.msg,
                  type: "success"
            });
            this.tabselect()
          })
        }).catch(() => {
          this.tableData.forEach(items => {
            if(items.roleId==bol.roleId){
              items.active=!items.active
            }
          });
          this.$message({
            type: 'info',
            message: '已取消修改'
          });          
        });
	},
    lfsyzm() {
      this.lfs = false;
      var that = this;
      var jsq = setInterval(function() {
        that.times--;
        if (that.times == 0) {
          that.lfs = true;
          that.times = 60;
          clearInterval(jsq);
        }
      }, 1000);
      var datas = {
        mobile: this.ruleForm2.phones
      };
      wcode(datas).then(res => {
        // console.log(res);
      });
    },
    keeps() {
      var datas = {
        mobile: this.ruleForm2.phones,
        password: this.ruleForm2.password,
        businessName: this.ruleForm2.businessName,
        code: this.ruleForm2.codes,
        roleId: this.ruleForm2.value,
        pid: this.$store.getters.businessId
      };
      child_accout_create(datas).then(res => {
        this.$message({
          message: res.data.msg,
          type: "success"
        });
        this.tabselect()
        this.$refs[formName].resetFields();
        
      });
    },
    // 验证手机号
    checkMobile(str) {
      let re = /^1\d{10}$/
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
    tabselect(){
      var datas={
      businessId:this.$store.getters.businessId
      }
      child_accout_list(datas).then(res=>{
        console.log(res)
        this.tableData=res.data.data
        this.tableData.forEach(item => {
          if(item.active==0){
            item.active=true
          }else{
            item.active=false
          }
        });
      })
    }
  }
};
</script>
<style scoped>
.datare /deep/ .el-tabs__nav {
  margin-left: 60px;
}
.datare /deep/ .el-tabs__item.is-active {
  color: #f06048;
}
.datare /deep/ .el-tabs__active-bar {
  color: #f06048;
}
.datare /deep/ .el-tabs__item:hover {
  color: #f06048;
}
.datare /deep/ .el-tabs__active-bar {
  background-color: #f06048;
}
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}
.datale .router-link-exact-active {
  color: #ff9381;
}
.datale a:hover {
  color: #ff9381;
}
.datale {
  background-color: #ffffff;
  border-radius: 6px;
}
.borebon {
  border-bottom: 12px solid #eee;
}
.borebon ul {
  display: inline-block;
  margin-left: 20px;
}
.borebon ul span {
  font-size: 24px;
  font-weight: 550;
  font-stretch: normal;
  line-height: 32px;
  letter-spacing: 0px;
  color: #313131;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
.borebon ul li {
  width: 146px;
  line-height: 34px;
  font-size: 15px;
}
.ontoi .datale .sonh_g li {
  width: 120px;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
  height: 43px;
  background-color: #f06048;
  box-shadow: 0px 4px 2px 0px rgba(70, 23, 15, 0.38);
  border-radius: 0px 0px 20px 20px;
}
.toxian {
  margin-top: 23px;
  font-size: 17px;
  text-indent: 62px;
  border-bottom: solid 1px rgb(220, 220, 220);
  padding: 10px 0px;
}
.lbu102bt {
  width: 40%;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
}
</style>